import React, { useState, useEffect } from 'react';
import { Layout as AntLayout, Menu, Drawer, Button, ConfigProvider } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { ProjectOutlined, MenuOutlined, HomeOutlined } from '@ant-design/icons';
import UserProfile from './UserProfile';
const { Header, Content } = AntLayout;

interface LayoutProps {
    children: React.ReactNode;
}

// 主题配置对象，调整选中效果和统一内边距
const menuThemeConfig = {
    components: {
        Menu: {
            darkItemSelectedColor: '#FFFFFF',
            darkItemHoverColor: '#FFFFFF',
            itemPaddingInline: 32, // 统一内边距
        },
    },
};

const Layout: React.FC<LayoutProps> = ({ children }) => {
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [isMobile, setIsMobile] = useState(false);
    const navigate = useNavigate();
    const location = useLocation();
    const menuItems = [
        { key: '/', icon: <HomeOutlined />, label: '项目' },
        // { key: '/projects', icon: <ProjectOutlined />, label: '项目管理' },
    ];

    useEffect(() => {
        const checkIsMobile = () => setIsMobile(window.innerWidth <= 1200);
        checkIsMobile();
        window.addEventListener('resize', checkIsMobile);
        return () => window.removeEventListener('resize', checkIsMobile);
    }, []);

    const handleMenuClick = ({ key }: { key: string }) => {
        navigate(key);
        setDrawerVisible(false);
    };

    const getSelectedKey = () => {
        const currentPath = location.pathname;
        const bestMatch = menuItems
            .map((item) => item.key)
            .filter((key) => currentPath.startsWith(key))
            .sort((a, b) => b.length - a.length)[0];
        return bestMatch || '/';
    };

    return (
        <AntLayout>
            <Header
                style={{
                    position: 'fixed',
                    top: 0,
                    zIndex: 1000,
                    width: '100%',
                    background: '#1e1e1e', // 导航栏背景改为纯黑色
                    borderBottom: 'none',
                    display: 'flex',
                    alignItems: 'center',
                    boxShadow: '0 4px 15px rgba(0, 0, 0, 0.5)',
                    height: '72px',
                }}
            >
                <div
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                        flex: 1,
                        height: '100%',
                    }}
                >
                    <div
                        className="header-logo"
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            marginRight: isMobile ? '16px' : '24px',
                            cursor: 'pointer',
                            height: '100%',
                            position: 'relative',
                            zIndex: 10,
                        }}
                        onClick={() => navigate('/')}
                    >
                        <img src="/自由编导-02.png" alt="Logo" style={{ height: '80px', objectFit: 'contain' }} />
                    </div>

                    {!isMobile && (
                        <div className="desktop-menu" style={{ flex: 1, height: '100%' }}>
                            <ConfigProvider theme={menuThemeConfig}>
                                <Menu
                                    mode="horizontal"
                                    selectedKeys={[getSelectedKey()]}
                                    items={menuItems}
                                    onClick={handleMenuClick}
                                    style={{
                                        border: 'none',
                                        background: 'transparent',
                                        height: '100%',
                                    }}
                                    theme="dark"
                                />
                            </ConfigProvider>
                        </div>
                    )}

                    {isMobile && (
                        <Button
                            type="text"
                            icon={<MenuOutlined style={{ color: 'white', fontSize: '18px' }} />}
                            onClick={() => setDrawerVisible(true)}
                            style={{
                                fontSize: '18px',
                                height: '40px',
                                width: '40px',
                                color: 'white',
                                border: 'none',
                                backgroundColor: 'rgba(255, 255, 255, 0.1)',
                            }}
                        />
                    )}
                </div>

                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <div style={{ color: 'white' }}>
                        <UserProfile />
                    </div>
                </div>
            </Header>

            <Drawer title="导航菜单" placement="left" onClose={() => setDrawerVisible(false)} open={drawerVisible} styles={{ body: { padding: 0 } }} width={window.innerWidth < 576 ? '280px' : '320px'}>
                <Menu mode="vertical" selectedKeys={[getSelectedKey()]} items={menuItems} onClick={handleMenuClick} style={{ border: 'none' }} />
            </Drawer>

            <Content
                style={{
                    marginTop: '72px',
                    padding: '16px',
                    background: 'linear-gradient(135deg, #303030 0%, #3a3a3a 100%)',
                    minHeight: 'calc(100vh - 72px)',
                    position: 'relative',
                    overflow: 'hidden',
                }}
            >
                {/* 添加暗色网格背景纹理 */}
                <div
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        backgroundImage: `linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px)`,
                        backgroundSize: '20px 20px',
                        backgroundPosition: '-1px -1px',
                        pointerEvents: 'none',
                    }}
                />

                <div
                    style={{
                        background: 'rgba(45, 45, 45, 0.75)',
                        borderRadius: '12px',
                        padding: '24px',
                        minHeight: '100%',
                        position: 'relative',
                        boxShadow: '0 6px 24px rgba(0, 0, 0, 0.2)',
                        backdropFilter: 'blur(10px)',
                        border: '1px solid rgba(255, 255, 255, 0.15)',
                    }}
                >
                    {children}
                </div>
            </Content>
        </AntLayout>
    );
};

export default Layout;
